Welcome to django!

7.03 使用Bootstrap实现首页样式

1、引用Bootstrap中文文档

地址：v3.bootcss.com

2、在上述网站= > 入门中加入以下代码在head

< link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" >

< script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" > < /script >

3、 在网站在找到= > 组件= > 面板= > 带标题的面板，复制以下代码到html:

< div class="panel panel-primary" >

< !-- 默认为panel-default颜色,可以参考情境效果， 改成蓝色：panel-primary-- >

< div class="panel-heading" > Panel heading without title < /div >

< div class="panel-body" >

< h1 > 欢迎来到盛凌报价系统 < /h1 >

< p > 只有你想不到的，没有做不到的 < /p >

< button > < a href="" > 开始吧 < /a > < /button >

< /div >

< /div >

4、全局 CSS 样式=>栅格系统

5、全局 CSS 样式=>按钮

弃用botton按钮格式，修改为a标签设置格式

< !DOCTYPE html >

< html lang="en" >

< head >

< meta charset="UTF-8" >

< title > Title < /title >

< link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" >

< script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" > < /script >

< /head >

< body >

< div class="container" style="margin-top:20px" >

< !-- 主体顶头距为20px-- >

< div class="row" >

< div class="col-8 col-offset-2" >

< div class="panel panel-primary" >

< !-- 项目菜单默认为panel-default颜色,可以参考情境效果，改成蓝色：p anel-primary-- >

< div class="panel-heading" >

< h2 class="panel-title" > Book Manage System < /h2 >

< !--修改项目菜单名称为：Book Manage System-- >

< /div >

< div class="panel-body" >

< div class="jumbotron" >

< !--加入项目主体颜色jumbotron-- >

< h1 > 欢迎来到盛凌报价系统 < /h1 >

< p > 只有你想不到的，没有做不到的 < /p >

< a class="btn btn-primary btn-lg" role="button" > 开始吧 < /a >

< !-- btn-primary为按钮颜色，btn-lg为加大-- >

< /div >

< /div >

< /div >

< /div >

< /div >

< /div >

< /body >

< /html >